function  makeDivison(featureOrder,threshold,splitNode){
    lefttemp = {};
    righttemp={};

    tempType = splitNode.typelist;
    tempData = splitNode.data;
    temcenter = splitNode.center;
    typelabel= unique(tempType);

    for(let i=0;i<typelabel.length;i++)
    {
        lefttemp[typelabel[i]]=0;
        righttemp[typelabel[i]]=0;
    }
    for (let i =0 ;i<tempData.length;i++)
    {
        if(tempData[i][featureOrder]<=threshold)
        {
            lefttemp[tempType[i]]++;
        }
        else
        {
            righttemp[tempType[i]]++;
        }

    }
    let misarry = {};
    for (let i in temcenter)
    {
       if(temcenter[i][featureOrder]>threshold)
        {
             selectsplitmistake+= righttemp[i];
             misarry[i] = righttemp[i]/(righttemp[i]+lefttemp[i]);
        }
        else
        {
            selectsplitmistake+=lefttemp[i];
            misarry[i] = lefttemp[i]/(righttemp[i]+lefttemp[i]);
        }
    }
    return misarry;

}
function makeDivisionData(featureOrder,threshold){//feature,代指在数组中特征的序号 threshold
    lefttemp = {};
    righttemp={};

    tempType = splitNode.typelist;
    tempData = splitNode.data;
    temcenter = splitNode.center;
    typelabel= unique(tempType);
    selectsplitmistake = 0;
     selectsplitFeature = featureOrder;
     selectsplitValue = threshold;
    for(let i=0;i<typelabel.length;i++)
    {
        lefttemp[typelabel[i]]=0;
        righttemp[typelabel[i]]=0;
    }
    for (let i =0 ;i<tempData.length;i++)
    {
        if(tempData[i][featureOrder]<=threshold)
        {
            lefttemp[tempType[i]]++;
        }
        else
        {
            righttemp[tempType[i]]++;
        }

    }
    let arry = [];

    for (let i in temcenter)
    {
        if(temcenter[i][featureOrder]<=threshold)
        {
             selectsplitmistake+= righttemp[i];
             arry.push([lefttemp[i],righttemp[i],i,1]);
        }
        else
        {
            selectsplitmistake+=lefttemp[i];
            arry.push([lefttemp[i],righttemp[i],i,0]);
        }
    }
    return arry;

}
function  drawAttributeDivisionChart(feature,threshold,con){

    data = makeDivisionData(feature,threshold);
    const chart = new Chart();
    const config = {
        margins: {top: 50, left: 0, bottom: 0, right: 0},
        textColor: 'black',
        gridColor: 'gray',
        title: '基础河流图',
        animateDuration: 1000
    }
    datamax = d3.max(data,(d)=>{
        return Math.max(d[1],d[0]);
    });
    chart.scaleX = d3.scaleLinear().domain([0,datamax]).range([0,60]);
    chart.margins(config.margins);
    chart.width(200);
    chart.height(130);

    chart.renderArea = function (){

        let center = splitNode.center;
        let leftcenterlist = [];
        let rightcenterlist=[];
        for (k in center) {
            if (center[k][feature]<threshold)
            {
                leftcenterlist.push({'index': k, 'value': center[k]});
            }
            else
            {
                rightcenterlist.push({'index': k, 'value': center[k]});
            }
        }
        for (let i=0;i<leftcenterlist.length;i++)
        {
            chart.body().append('circle').attr("cx",80-i*15).attr("cy",-10).attr("r",5)
                .attr('fill',chart._colors[parseInt(leftcenterlist[i].index)+1])
                .attr("stroke","black");
        }
        for (let i=0;i<rightcenterlist.length;i++)
        {
            chart.body().append('circle').attr("cx",120+i*15).attr("cy",-10).attr("r",5)
                .attr('fill',chart._colors[parseInt(rightcenterlist[i].index)+1])
                .attr("stroke","black");
        }
        chart.svg().append('text')
                .classed('title', true)
                .attr('x', chart.width()/2)
                .attr('y', 8)
                .attr('dy', '1em')
                .attr("text-anchor","middle")
                .text(featureNames[feature])
                .attr('fill', config.textColor)
                .attr('text-anchor', 'middle')
                .attr('stroke', config.textColor);
        chart.body().selectAll('rect').remove();
         chart.body().append('rect').attr("id","dragRect").attr("x",10).attr("y",-18).attr("width",chart.getBodyWidth()-20).attr("height",15)
            .style("fill","#7ba285").style("stroke","#2f2123").attr("fill-opacity",0.3);
        const areas =  chart.body().selectAll('.rect').data(data);
        areas.enter().append("rect").attr("class","rect").attr("x",(d)=>(100-chart.scaleX(d[0])))
            .attr("y",(d,i)=>i*10+10).attr("width",(d)=>chart.scaleX(d[0]))
            .attr("height",10).attr("fill",(d,i)=>chart._colors[parseInt(d[2])+1])
             .attr('fill-opacity', function (d,i){
                    if (d[0]>d[1])
                        return 1;
                    else
                        return 0.5;
                });
        areas.enter().append("rect").attr("x",100)
            .attr("y",(d,i)=>i*10+10).attr("width",(d)=>chart.scaleX(d[1]))
            .attr("height",10).attr("fill",(d,i)=>chart._colors[parseInt(d[2])+1])
            .attr('fill-opacity', function (d,i){
                if (d[0]>d[1])
                    return 0.5;
                else
                    return 1;
            });
        areas.enter().append("text").attr("x",function (d,i) {
            if(d[3]==1)
            {
                return 103+chart.scaleX(d[1]);
            }
            else
            {
                 return 100-chart.scaleX(d[0])-20;
            }

        })
            .attr("y",(d,i)=>i*10+19)
            .attr("font-size",10)
            .text((d)=>d[d[3]]);
         chart.body().append("line").attr("x1",100).attr("x2",100).attr("y1",-18)
            .attr("y2",60).style("stroke","black").attr("stroke-width",2);

         chart.body().append("text")
             .attr("x",5)
            .attr("y",65)
             .attr('dy', '1em')
            .text("threshold:"+threshold)
             .attr('fill', config.textColor)
                .attr('stroke', config.textColor);
         chart.body().append("text")
             .attr("x",110)
            .attr("y",65)
             .attr('dy', '1em')
            .text("mistake:"+selectsplitmistake)
             .attr('fill', config.textColor)
                .attr('stroke', config.textColor);

    }
/* ----------------------------渲染图标题------------------------  */
    chart.renderTitle = function(){
        chart.svg().append('text')
                .classed('title', true)
                .attr('x', chart.width()/2)
                .attr('y', 0)
                .attr('dy', '2em')
                .text(featureNames[feature]+":"+parseFloat(threshold).toFixed(2))
                .attr('fill', config.textColor)
                .attr('text-anchor', 'middle')
                .attr('stroke', config.textColor);


    }
    chart.render = function(){

        // chart.renderAxis();
        //
        // chart.renderText();

       // chart.renderGrid();

        // chart.renderTitle();

        chart.renderArea();

        // chart.addMouseOn();
    }
    chart.box(con);
    chart.renderChart();
}